<template>
    <view class="theme-switcher" :class="{ compact: compact }" :style="themeVars" @click.stop>
        <!-- 紧凑模式：只显示当前主题和切换按钮 -->
        <view v-if="compact" class="compact-switcher">
            <view class="current-theme" :style="currentThemeStyle" @click="toggleExpanded">
                <view class="theme-preview" :style="{ background: currentThemeConfig.gradient }">
                    <text class="theme-icon">{{ currentThemeConfig.icon }}</text>
                </view>
                <text class="theme-name" :style="{ color: currentThemeConfig.text.primary }">{{ currentThemeConfig.name }}</text>
                <text class="expand-icon" :style="{ color: currentThemeConfig.text.secondary }" :class="{ expanded: isExpanded }">▼</text>
            </view>

            <!-- 展开的主题列表 -->
            <view v-if="isExpanded" class="theme-dropdown" :style="dropdownStyle" @click.stop>
                <view
                    v-for="theme in availableThemes"
                    :key="theme.key"
                    class="dropdown-item"
                    :class="{ active: currentTheme === theme.key }"
                    :style="getDropdownItemStyle(theme.key === currentTheme)"
                    @click="handleSwitchTheme(theme.key)"
                >
                    <view class="item-preview" :style="{ background: theme.gradient }">
                        <text class="item-icon">{{ theme.icon }}</text>
                    </view>
                    <view class="item-info">
                        <text class="item-name" :style="{ color: currentThemeConfig.text.primary }">{{ theme.name }}</text>
                        <text class="item-desc" :style="{ color: currentThemeConfig.text.secondary }">{{ theme.description }}</text>
                    </view>
                    <text v-if="currentTheme === theme.key" class="check-icon" :style="{ color: currentThemeConfig.text.primary }">✓</text>
                </view>
            </view>
        </view>

        <!-- 完整模式：显示所有主题选项 -->
        <view v-else class="full-switcher">
            <view class="switcher-header">
                <text class="header-title" :style="{ color: currentThemeConfig.text.primary }">选择主题</text>
                <text class="header-subtitle" :style="{ color: currentThemeConfig.text.secondary }">{{ availableThemes.length }}种风格可选</text>
            </view>

            <view class="theme-grid">
                <view
                    v-for="theme in availableThemes"
                    :key="theme.key"
                    class="theme-option"
                    :class="{ active: currentTheme === theme.key }"
                    :style="getThemeOptionStyle(theme.key === currentTheme)"
                    @click="handleSwitchTheme(theme.key)"
                >
                    <view class="option-preview" :style="{ background: theme.gradient }">
                        <text class="option-icon">{{ theme.icon }}</text>
                    </view>
                    <view class="option-info">
                        <text class="option-name" :style="{ color: currentThemeConfig.text.primary }">{{ theme.name }}</text>
                        <text class="option-desc" :style="{ color: currentThemeConfig.text.secondary }">{{ theme.description }}</text>
                    </view>
                    <view v-if="currentTheme === theme.key" class="active-indicator" :style="{ background: currentThemeConfig.accent }">
                        <text class="check-icon" :style="{ color: currentThemeConfig.text.primary }">✓</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useTheme } from '@/composables/useTheme'
import type { ThemeKey } from '@/config/theme.config'

// 组件属性
interface Props {
    compact?: boolean // 是否使用紧凑模式
}

const props = withDefaults(defineProps<Props>(), {
    compact: false
})

// 使用全局主题
const { currentTheme, currentThemeConfig, availableThemes, switchTheme, getThemeVars } = useTheme()

// 主题变量（确保小程序端内联变量可用）
const themeVars = computed(() => getThemeVars())

// 紧凑模式状态
const isExpanded = ref(false)

// 计算样式 - 解决小程序CSS变量问题
const currentThemeStyle = computed(() => ({
    background: currentThemeConfig.value.surface,
    borderColor: currentThemeConfig.value.border
}))

const dropdownStyle = computed(() => ({
    background: currentThemeConfig.value.surface,
    borderColor: currentThemeConfig.value.border,
    boxShadow: currentThemeConfig.value.shadow
}))

const getDropdownItemStyle = (isActive: boolean) => {
    return {
        borderColor: currentThemeConfig.value.border,
        background: isActive ? currentThemeConfig.value.accent : 'transparent'
    }
}

const getThemeOptionStyle = (isActive: boolean) => {
    return {
        background: currentThemeConfig.value.surface,
        borderColor: isActive ? currentThemeConfig.value.accent : currentThemeConfig.value.border,
        boxShadow: isActive ? currentThemeConfig.value.shadow : 'none'
    }
}

// 切换展开状态
const toggleExpanded = () => {
    isExpanded.value = !isExpanded.value
}

// 处理主题切换
const handleSwitchTheme = async (themeKey: ThemeKey) => {
    await switchTheme(themeKey)

    // 紧凑模式下切换后收起
    if (props.compact) {
        isExpanded.value = false
    }
}

// 点击外部收起下拉 - 兼容不同平台
const handleClickOutside = () => {
    if (props.compact && isExpanded.value) {
        isExpanded.value = false
    }
}

// 监听点击外部事件 - 仅在H5环境下使用
onMounted(() => {
    // #ifdef H5
    if (props.compact && typeof document !== 'undefined') {
        document.addEventListener('click', handleClickOutside)
    }
    // #endif
})

onUnmounted(() => {
    // #ifdef H5
    if (props.compact && typeof document !== 'undefined') {
        document.removeEventListener('click', handleClickOutside)
    }
    // #endif
})
</script>

<style lang="scss" scoped>
@import '@/styles/theme.scss';

.theme-switcher {
    position: relative;

    // 紧凑模式样式
    &.compact {
        .compact-switcher {
            position: relative;

            .current-theme {
                display: flex;
                align-items: center;
                gap: $spacing-sm;
                padding: $spacing-sm $spacing-md;
                background: var(--theme-surface);
                border: 1rpx solid var(--theme-border);
                border-radius: $border-radius-medium;
                cursor: pointer;
                transition: all 0.3s ease;

                &:active {
                    transform: scale(0.98);
                }

                .theme-preview {
                    width: 40rpx;
                    height: 40rpx;
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .theme-icon {
                        font-size: 20rpx;
                    }
                }

                .theme-name {
                    flex: 1;
                    font-size: $font-size-md;
                    color: var(--theme-text-primary);
                    font-weight: 500;
                }

                .expand-icon {
                    font-size: $font-size-sm;
                    color: var(--theme-text-secondary);
                    transition: transform 0.3s ease;

                    &.expanded {
                        transform: rotate(180deg);
                    }
                }
            }

            .theme-dropdown {
                position: absolute;
                top: 100%;
                left: 0;
                right: 0;
                z-index: 1000;
                background: var(--theme-surface);
                border: 1rpx solid var(--theme-border);
                border-radius: $border-radius-medium;
                margin-top: $spacing-xs;
                max-height: 400rpx;
                overflow-y: auto;
                backdrop-filter: blur(20rpx);
                box-shadow: var(--theme-shadow);

                .dropdown-item {
                    display: flex;
                    align-items: center;
                    gap: $spacing-sm;
                    padding: $spacing-md;
                    border-bottom: 1rpx solid var(--theme-border);
                    cursor: pointer;
                    transition: all 0.3s ease;

                    &:last-child {
                        border-bottom: none;
                    }

                    &:active {
                        background: rgba(255, 255, 255, 0.05);
                    }

                    &.active {
                        background: var(--theme-accent);
                        color: var(--theme-text-primary);
                    }

                    .item-preview {
                        width: 32rpx;
                        height: 32rpx;
                        border-radius: 50%;
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .item-icon {
                            font-size: 16rpx;
                        }
                    }

                    .item-info {
                        flex: 1;

                        .item-name {
                            display: block;
                            font-size: $font-size-sm;
                            font-weight: 500;
                            margin-bottom: 2rpx;
                        }

                        .item-desc {
                            display: block;
                            font-size: $font-size-xs;
                            opacity: 0.7;
                        }
                    }

                    .check-icon {
                        font-size: $font-size-sm;
                        font-weight: bold;
                    }
                }
            }
        }
    }

    // 完整模式样式
    .full-switcher {
        .switcher-header {
            text-align: center;
            margin-bottom: $spacing-lg;

            .header-title {
                display: block;
                font-size: $font-size-lg;
                font-weight: 600;
                color: var(--theme-text-primary);
                margin-bottom: $spacing-xs;
            }

            .header-subtitle {
                display: block;
                font-size: $font-size-sm;
                color: var(--theme-text-secondary);
            }
        }

        .theme-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280rpx, 1fr));
            gap: $spacing-md;

            .theme-option {
                position: relative;
                background: var(--theme-surface);
                border: 2rpx solid var(--theme-border);
                border-radius: $border-radius-large;
                padding: $spacing-lg;
                cursor: pointer;
                transition: all 0.3s ease;

                &:active {
                    transform: scale(0.98);
                }

                &.active {
                    border-color: var(--theme-accent);
                    box-shadow: var(--theme-shadow);
                }

                .option-preview {
                    width: 100%;
                    height: 60rpx;
                    border-radius: $border-radius-medium;
                    margin-bottom: $spacing-md;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .option-icon {
                        font-size: 28rpx;
                    }
                }

                .option-info {
                    .option-name {
                        display: block;
                        font-size: $font-size-md;
                        font-weight: 600;
                        color: var(--theme-text-primary);
                        margin-bottom: $spacing-xs;
                    }

                    .option-desc {
                        display: block;
                        font-size: $font-size-sm;
                        color: var(--theme-text-secondary);
                    }
                }

                .active-indicator {
                    position: absolute;
                    top: $spacing-sm;
                    right: $spacing-sm;
                    width: 24rpx;
                    height: 24rpx;
                    background: var(--theme-accent);
                    border-radius: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;

                    .check-icon {
                        color: var(--theme-text-primary);
                        font-size: 16rpx;
                        font-weight: bold;
                    }
                }
            }
        }
    }
}
</style>
